import "taro-ui/dist/style/components/input.scss"
import { AtInput } from "taro-ui"
import React, { useCallback, useEffect, useState } from "react"
import { AtInputProps } from "taro-ui/types/input"
interface Props extends Omit<AtInputProps, "value"> {
	onChange: (val: string) => void
	defaultVal?: string
}
const TInput: React.FC<Props> = props => {
	const { onChange, maxlength, defaultVal, ...config } = props
	const [val, setVal] = useState<string>("")
	const valChange = useCallback((val: string) => {
		setVal(val)
		return val
	}, [])
	useEffect(() => {
		val !== undefined && !!onChange && onChange(val)
	}, [val])

	const onFocus = useCallback(
		(v, e) => {
			if (props.maxlength) {
				e.currentTarget.children[0].setAttribute("maxlength", props.maxlength)
			}
		},
		[props.maxlength]
	)
	return <AtInput onFocus={onFocus} value={val || defaultVal} maxlength={11} onChange={valChange} {...config} />
}
export default TInput
